<template>
  <div class="baseDesign-title">
    <div class="goBack" @click="goBack">
      <span class="icon"> &#xe628; </span> 返回
    </div>
    <div class="topBox">
      <div
        :class="{ label: true, act: rout === 'base' }"
        @click="routeHandle('base')"
      >
        <span>01</span>基础配置
      </div>
      <div
        :class="{ label: true, act: rout === 'form' }"
        @click="routeHandle('form')"
      >
        <span>02</span>表单设计
      </div>
    </div>
    <div class="butList">
      <!-- <span class="look" @click="previewHandle">预览</span> -->
      <span class="look" @click="submitHandle('pre')">预览</span>
      <span class="open" @click="submitHandle">发布</span>
    </div>
    <t-dialog
      v-model:visible="visible"
      :footer="false"
      width="100%"
      mode="full-screen"
      top="0"
    >
      <template #header
        ><span
          class="iconfont btn_mobile_nor2x"
          :class="{ active: showScreen === 'phon' }"
        ></span
        ><span
          class="iconfont btn_pc_nor2x"
          :class="{ active: showScreen === 'pc' }"
        ></span
      ></template>
      <renderForm :key="renderKey" />
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import renderForm from '../renderForm.vue'

const showScreen = ref('pc')
const rout = ref('base')
// 接收父级的方法
const emit: Function = defineEmits(['routHandle', 'submitHandle'])
// tab切换
const routeHandle = (tg) => {
  rout.value = tg
  emit('routHandle', tg)
}
const visible = ref(false)
// 预览
const router = useRouter()
const num = ref(0)
const renderKey = computed(() => `render${num.value}`)
const previewHandle = async () => {
  num.value++
  visible.value = true
  // router.push('/formList/renderForm')
  // router.push('/renderform')
}
// 数据提交
const submitHandle = async (val?: string) => {
  if (val === 'pre') {
    // 预览
    emit('submitHandle', val)
    // previewHandle() 调试先关闭弹窗
  } else {
    // 数据保存
    emit('submitHandle')
  }
  // val ? emit('submitHandle', val) : emit('submitHandle')
}
// 返回上一页
const goBack = () => {
  router.back()
}
</script>
<style lang="less" scoped>
.t-dialog__header {
  display: none;
}
.baseDesign {
  &-title {
    opacity: 0;
    animation: opacity 100ms 500ms forwards;
    position: absolute;
    z-index: 999;
    top: -20px;
    left: 0px;
    width: 100%;
    color: #00074a;
    background: #fff;
    display: flex;
    .iconfont {
      font-size: 32px;
      color: #999999;
      font-weight: 200;
      cursor: pointer;
      margin: 0 10px;
    }
    .btn_pc_nor2x {
      font-size: 34px;

      margin: 0 10px;
    }
    .active {
      color: #3345ff;
    }
    .goBack,
    .butList {
      cursor: pointer;
      display: flex;
      padding: 0 10px;
      align-items: center;
      .look,
      .open {
        display: inline-block;
        padding: 0px 10px;
        border: solid 1px #3345ff;
        color: #3345ff;
        font-size: 14px;
        border-radius: 3px;
        cursor: pointer;
        margin-left: 10px;
      }
      .open {
        background: #3345ff;
        color: #fff;
      }
    }
    .topBox {
      display: flex;
      text-align: center;
      width: 500px;
      margin: 0 auto;
      padding: 20px 0;
      .act {
        color: #3345ff;
      }
      span {
        font-weight: bold;
        margin-right: 2px;
      }
    }
    .label {
      flex: 1;
      cursor: pointer;
    }
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
